<head> ট্যাগের ব্যবহার

মেটা ডেটা এবং হেড সেকশন - এক্সএইচটিএমএল (XHTML) - Web Development

489

XHTML ডকুমেন্টে <head> ট্যাগ একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা ডকুমেন্টের মেটাডেটা ধারণ করে। এটি ব্রাউজারকে ডকুমেন্টের নির্দিষ্ট তথ্য যেমন শিরোনাম, মেটা তথ্য, স্টাইলশীট, স্ক্রিপ্ট ইত্যাদি জানায়। <head> ট্যাগটি ডকুমেন্টের <html> ট্যাগের ভেতরে থাকে এবং এটি পেজের ভিজ্যুয়াল কনটেন্ট (যেমন, <body>) থেকে আলাদা থাকে।


১. <head> ট্যাগের মৌলিক গঠন

একটি সাধারণ XHTML ডকুমেন্টে <head> ট্যাগের মধ্যে নিম্নলিখিত উপাদানগুলি থাকতে পারে:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>My XHTML Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Welcome to My XHTML Page</h1>
    <p>This is a simple XHTML document.</p>
</body>
</html>

২. <head> ট্যাগের প্রধান উপাদানসমূহ

২.1 <title> ট্যাগ

<title> ট্যাগটি ডকুমেন্টের শিরোনাম সংরক্ষণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়। এটি ডকুমেন্টের জন্য একটি সংক্ষিপ্ত পরিচয় প্রদান করে।

<title>My XHTML Page</title>

২.2 <meta> ট্যাগ

<meta> ট্যাগটি মেটাডেটা, যেমন চরিত্র এনকোডিং, ডকুমেন্টের ভাষা, কিভাবে সার্চ ইঞ্জিনে ডকুমেন্টকে শনাক্ত করা হবে ইত্যাদি তথ্য সংরক্ষণ করে।

২.2.1 চরিত্র এনকোডিং (Character Encoding)

<meta charset="UTF-8" />

এটি ডকুমেন্টের চরিত্র এনকোডিং সংজ্ঞায়িত করে। সাধারণত UTF-8 ব্যবহার করা হয় যা ইউনিকোডের একটি জনপ্রিয় এনকোডিং স্কিমা।

২.2.2 ডকুমেন্টের ভাষা (Language)

<meta> ট্যাগে আপনি ডকুমেন্টের ভাষা উল্লেখ করতে পারেন। এটি সার্চ ইঞ্জিন এবং ব্রাউজারকে ডকুমেন্টের ভাষা সম্পর্কে জানায়।

<meta http-equiv="Content-Language" content="en-US" />

এটি ইংরেজি (যুক্তরাষ্ট্র) ভাষার জন্য ব্যবহৃত হয়।

২.2.3 ডকুমেন্টের বর্ণনা (Description)

<meta name="description" content="This is an XHTML document example." />

এটি ডকুমেন্টের সংক্ষিপ্ত বর্ণনা প্রদান করে, যা সার্চ ইঞ্জিনের ফলাফলগুলিতে প্রদর্শিত হতে পারে।

২.3 <link> ট্যাগ

<link> ট্যাগটি বাইরের রিসোর্স, যেমন স্টাইলশীট সংযোগ করার জন্য ব্যবহৃত হয়। এটি সাধারণত ডকুমেন্টের <head> ট্যাগে রাখা হয়।

<link rel="stylesheet" type="text/css" href="styles.css" />

এটি একটি এক্সটার্নাল CSS ফাইলের সাথে ডকুমেন্ট সংযোগ করে।

২.4 <script> ট্যাগ

<script> ট্যাগটি স্ক্রিপ্ট ফাইল বা স্ক্রিপ্ট কোড সংযুক্ত করতে ব্যবহৃত হয়। সাধারণত এটি JavaScript কোড সংযোগের জন্য ব্যবহৃত হয়।

<script type="text/javascript" src="script.js"></script>

এটি বাইরের JavaScript ফাইলের সাথে ডকুমেন্ট সংযোগ করে।


৩. <head> ট্যাগের অন্যান্য ব্যবহৃত উপাদানসমূহ

৩.1 <base> ট্যাগ

<base> ট্যাগটি একটি বেস ইউআরএল (Base URL) নির্ধারণ করে, যা ডকুমেন্টে ব্যবহৃত অন্যান্য রিলেটিভ লিংকগুলির জন্য ব্যবহার হয়। এটি <head> ট্যাগের মধ্যে একবার ব্যবহার করা হয়।

<base href="https://www.example.com/" />

এটি সমস্ত রিলেটিভ লিংকগুলির জন্য বেস ইউআরএল হিসেবে কাজ করবে।

৩.2 <style> ট্যাগ

<style> ট্যাগটি ডকুমেন্টের মধ্যে ইনলাইন CSS যোগ করার জন্য ব্যবহৃত হয়। তবে, সাধারণত বাইরের CSS ফাইল ব্যবহার করা হয়, কারণ এটি পেজ লোডিং স্পিড এবং রক্ষণাবেক্ষণ উন্নত করে।

<style type="text/css">
    body {
        background-color: lightblue;
    }
</style>

এটি পেজে ইনলাইন CSS শৈলী সংজ্ঞায়িত করে।


৪. <head> ট্যাগের গুরুত্বপূর্ণ বিষয়াবলী

৪.1 XML সঙ্গততা

XHTML একটি XML-ভিত্তিক ভাষা হওয়ায়, <head> ট্যাগের প্রতিটি উপাদান সঠিকভাবে বন্ধ হতে হবে এবং সঠিকভাবে কেস সেনসিটিভ হতে হবে।

  • <meta charset="UTF-8" /> - অবশ্যই সঠিকভাবে বন্ধন সহ ব্যবহার করতে হবে।
  • <link />, <script /> - এই ধরনের একক ট্যাগগুলোও বন্ধনসহ ব্যবহার করতে হবে।

৪.2 স্টাইলশীট এবং স্ক্রিপ্ট ফাইলের লোডিং

XHTML ডকুমেন্টে link এবং script ট্যাগের মধ্যে type অ্যাট্রিবিউট উল্লেখ করা আবশ্যক, যদিও এটি বেশিরভাগ আধুনিক ব্রাউজারে ঐচ্ছিক হয়ে গেছে। তবে এটি XHTML ডকুমেন্টে সঠিকভাবে উল্লেখ করা উচিত।


XHTML ডকুমেন্টে <head> ট্যাগ একটি অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ডকুমেন্টের মেটাডেটা, শিরোনাম, স্টাইলশীট, স্ক্রিপ্ট এবং অন্যান্য প্রয়োজনীয় তথ্য ধারণ করে। meta, link, script, এবং title ট্যাগগুলোর মাধ্যমে আপনি ডকুমেন্টের পরিবেশ এবং কার্যকারিতা নির্ধারণ করতে পারেন। XHTML এর ক্ষেত্রে, <head> ট্যাগের সব উপাদান সঠিকভাবে বন্ধনসহ ব্যবহার করা আবশ্যক।

Content added By
Promotion

Are you sure to start over?

Loading...